<template>
  <div>
    <div
      class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
    >
      <div class="mui-scroll">
        <a
          :class="['mui-control-item' ,item.id===0 ? 'mui-active' : '']"
          v-for="item in classify"
          :key="item.id"
          @tap="clickList(item.id)"
        >{{item.title}}</a>
      </div>
    </div>

    <div class="all">
      <router-link
        class="allList"
        v-for="(item, index) in allImg"
        :key="index"
        tag="div"
        :to="'/home/photoInfo/'+item.id"
      >
        <img v-lazy="item.img_url" alt>
        <div class="description">
          <h3>{{item.title}}</h3>
          <span>{{item.zhaiyao}}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>


<script>
import mui from "@/lib/dist/js/mui.js";

export default {
  data() {
    return {
      classify: [],
      allImg: []
    };
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005
    });
  },
  created() {
    this.getList();
    this.getimg();
  },
  methods: {
    getList() {
      this.$http.get("api/getimgcategory").then(result => {
        result.body.message.unshift({ title: "全部", id: 0 });
        this.classify = result.body.message;
      });
    },
    getimg() {
      this.$http.get("api/getimages/0").then(result => {
        this.allImg = result.body.message;
      });
    },
    clickList(id) {
      this.$http.get("api/getimages/" + id).then(result => {
        this.allImg = result.body.message;
      });
    }
  }
};
</script>

<style scoped>
.all {
  padding: 10px 10px;
}
.allList {
  position: relative;
}
image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.all img {
  width: 100%;
}
.description {
  height: 90px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 5px;
  color: aliceblue;
  vertical-align: middle;
  box-shadow: 0, 0, 9px, #eee;
}
.description h3 {
  font-size: 14px;
}
.description span {
  font-size: 12px;
  overflow: hidden;
}
</style>
